<div class="form-group">
  <div ng-repeat="color in editor.formatParams.colors">
    <div class="editor-color">
      <button
        ng-if="editor.formatParams.colors.length > 1"
        aria-label="Remove Color"
        ng-click="removeColor($index)"
        tooltip="Remove Color"
        tooltip-append-to-body="true"
        type="button"
        class="kuiButton kuiButton--danger kuiButton--small editor-color-remove"
      >
        <span aria-hidden="true" class="kuiIcon fa-times"></span>
      </button>
      <div class="form-group" ng-if="editor.formatParams.fieldType === 'number'">
        <label for="scriptFieldColorRange">Range <small>(min:max)</small></label>
        <input
          id="scriptFieldColorRange"
          ng-model="color.range"
          class="form-control"
        >
      </div>
      <div class="form-group" ng-if="editor.formatParams.fieldType === 'string'">
        <label for="scriptFieldColorPattern">Pattern <small>(regular expression)</small></label>
        <input
          id="scriptFieldColorPattern"
          ng-model="color.regex"
          class="form-control"
        >
      </div>
      <div class="form-group">
        <label for="scriptFieldColorFont">Font Color</label>
        <input
          id="scriptFieldColorFont"
          ng-model="color.text"
          colorpicker
          type="text"
          class="form-control"
        >
      </div>
      <div class="form-group">
        <label for="scriptFieldColorBackground">Background Color</label>
        <input
          id="scriptFieldColorBackground"
          ng-model="color.background"
          colorpicker
          type="text"
          class="form-control"
        >
      </div>
      <div class="form-group">
        <label for="scriptFieldColorExample">Example</label>
        <div
          id="scriptFieldColorExample"
          class="form-control"
          ng-style="{color: color.text, 'background-color': color.background}"
          value="formatted"
        >
            123456
        </div>
      </div>

    </div>
  </div>

  <button
    aria-label="Add Color"
    ng-click="addColor()"
    tooltip="Add Color"
    tooltip-append-to-body="true"
    type="button"
    class="kuiButton kuiButton--primary kuiButton--small kuiButton--iconText"
  >
      <span
        aria-hidden="true"
        class="kuiButton__icon kuiIcon fa-plus"
      ></span>
      <span>Add Color</span>
  </button>

</div>
